<template>
  <view class="box">
    <!-- 导航栏 -->
    <view class="nav">
      <view class="nav-left">
        <image class="image" src="../../static/image/定位.png" mode=""></image>
        <input style="color:white;" @click="show = true" v-model="city" type="text" placeholder="地区（必填）" disabled
          class="text" />
        <u-picker mode="region" v-model="show" @confirm="getCity"></u-picker>
      </view>
      <!-- 搜索框 -->
      <view class="inp">
        <u-search placeholder="商品搜索" :show-action="false"></u-search>
        <button class="btn">搜索</button>
      </view>
      <!-- Swiper  -->
      <view class="banner">
        <u-swiper :list="list"></u-swiper>
      </view>
    </view>
    <!-- 5个选项 -->
    <view class="box5">
      <u-grid :col="5">
        <u-grid-item>
          <image src="../../static/image/团购.png" style="width: 40px; height: 40px;" mode=""></image>
          <view class="grid-text">团购</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/秒杀.png" style="width: 40px; height: 40px;" mode=""></image>
          <view class="grid-text">秒杀</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/精选收藏.png" style="width: 40px; height: 40px;" mode=""></image>
          <view class="grid-text">精选</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/领券.png" style="width: 40px; height: 40px;" mode=""></image>
          <view class="grid-text">领券</view>
        </u-grid-item>
        <u-grid-item>
          <image src="../../static/image/分享.png" style="width: 40px; height: 40px;" mode=""></image>
          <view class="grid-text">分享</view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 2个盒子 -->
    <view class="box2">
      <view class="left">
        <view class="left1">
          <p>今日<span>秒杀</span></p>
          <u-count-down :timestamp="timestamp" bg-color="#efa447" color='#f8f8f8'
            separator-color="#fed5b1"></u-count-down>
        </view>
        <span class="color">限时折扣抢到就是赚到</span>
        <view class="left-image">
          <image class="image" src="../../static/image/鱼.png" mode=""></image>
          <image class="image" src="../../static/image/螃蟹.png" mode=""></image>
        </view>
      </view>
      <view class="right">
        <view class="right1">
          <p>热销排行榜</p>
          <p>更多 <span>></span></p>
        </view>
        <span class="color">大家都在买</span>
        <view class="right-image">
          <image class="image" src="../../static/image/火龙果.png" mode=""></image>
          <image class="image" src="../../static/image/菠萝.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 精选好物 -->
    <view class="recommend">
      <h1>推荐-精选好物</h1>
    </view>

    <!-- 今日疯抢 -->
    <view class="today">
      <view class="today1">
        <goods :title="require('../../static/image/包子.png')" title1="江苏无锡香菇猪肉包" title2="猪肉肥美 | 鲜甜嫩软 | 多汁美味"
          title3="多汁香嫩" title4="￥8.79" title5="/笼">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/西兰花.png')" title1="浙江临海西兰花" title2="基地直供 | 绿色培植 | 新鲜采摘" title3="绿色新鲜"
          title4="￥4.79" title5="/笼">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/西红柿.png')" title1="云南高山大西红柿" title2="鲜嫩多汁 | 软甜爽口 | 入口美味"
          title3="美味多汁" title4="￥2.44" title5="/斤">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
      <view class="today1">
        <goods :title="require('../../static/image/马铃薯.png')" title1="宁夏西吉县马铃薯" title2="基地直供 | 绿色培枯 | 新鲜采摘"
          title3="绿色新鲜" title4="￥3.12" title5="/斤">
          <template #t1>券</template>
          <template #t2>减10元</template>
        </goods>
      </view>
    </view>
  </view>
</template>

<script>
  import goods from '../../components/goods.vue'
  export default {
    components: {
      goods
    },
    data() {
      return {
        // 定时器
        timestamp: 86399,
        //地区搜索
        show: false,
        params: {
          province: true,
          city: true,
          area: true
        },
        city: null,
        // 轮播
        list: [{
            image: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Q1hKdqfwpg9cSmvWaMn8YwHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
          },
          {
            image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.SrA4P6HGYc5hBheuVT0DEAHaEp?w=285&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          },
          {
            image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.EbfQJXgAJRs-Fcu4u2rJkQHaEr?w=289&h=183&c=7&r=0&o=5&dpr=1.3&pid=1.7',
          }
        ],
      }
    },
    methods: {
      getCity(e) {
        this.city = e.province.label + e.city.label + e.area.label
      }
    }
  }
</script>

<style lang="scss">
  .box {
    width: 100%;
    // position: relative;
    background-color: #f8f8f8;

    // 导航栏
    .nav {
      background: linear-gradient(to bottom right, green, white);
      width: 100%;
      height: 350rpx;
      border-radius: 20rpx;
      position: relative;

      .nav-left {
        position: absolute;
        top: 50rpx;
        left: 30rpx;
        width: 60%;
        display: flex;

        .input-placeholder {
          color: #ffffff;
        }

        .image {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }

    // 搜索框
    .inp {
      width: 90%;
      margin-top: 150rpx;
      position: absolute;
      left: 40rpx;
      top: 0rpx;

      .btn {
        color: #ffffff;
        font-size: 20rpx;
        width: 100rpx;
        height: 50rpx;
        border-radius: 50rpx;
        background: linear-gradient(to bottom right, green, white);
        position: absolute;
        top: 6rpx;
        right: 2rpx;
      }
    }

    // 轮播图
    .banner {
      width: 90%;
      margin: auto;
      position: absolute;
      left: 39rpx;
      top: 250rpx;
    }
  }

  // 5个选项
  .box5 {
    width: 90%;
    margin: auto;
    margin-top: 170rpx;

    .u-grid {
      border-radius: 10rpx;
    }
  }

  //两个盒子
  .box2 {
    width: 90%;
    margin: auto;
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;

    .left {
      width: 45%;
      height: 220rpx;
      border-radius: 20rpx;
      background: linear-gradient(#fee9d2, white);

      .left-image {
        .image {
          width: 60px;
          height: 60px;
        }

        .image:nth-child(1) {
          margin-left: 6rpx;
        }

        .image:nth-child(2) {
          margin-left: 30rpx;
        }
      }

      .color {
        color: #ded4c9;
        font-size: 12px;
        margin-top: 10rpx;
        margin-left: 15rpx;
      }

      .left1 {
        margin-top: 15rpx;
        display: flex;
        justify-content: space-around;

        span {
          background: linear-gradient(to right, #ff0000, #ffff00);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        p {
          font-weight: bold;
        }
      }
    }

    .right {
      width: 45%;
      height: 220rpx;
      border-radius: 20rpx;
      background: linear-gradient(#fee8eb, white);

      .right-image {
        .image {
          width: 60px;
          height: 60px;
        }

        .image:nth-child(1) {
          margin-left: 15rpx;
        }

        .image:nth-child(2) {
          margin-left: 30rpx;
        }
      }

      .right1 {
        margin-top: 15rpx;
        display: flex;
        justify-content: space-around;

        p:nth-child(1) {
          font-weight: bold;
        }

        p:nth-child(2) {
          font-size: 12px;
          margin-top: -3rpx;
        }

        span {
          font-size: 16px;
          color: #e68455;
          font-weight: bold;
        }
      }

      .color {
        color: #ded4c9;
        font-size: 12px;
        margin-top: 10rpx;
        margin-left: 25rpx;
      }
    }
  }

  //精选好物
  .recommend {
    margin: auto;
    width: 90%;

    h1 {
      font-size: 24px;
      font-weight: bold;
    }
  }

  //今日疯抢
  .today {
    margin: auto;
    width: 90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .today1 {
      width: 48%;

      .goods {
        margin-top: 10px;
        width: 100%;
      }
    }

  }
</style>